<template>
  <div>
    <!-- 商品明细表格 -->
    <vxe-table
      border
      stripe
      ref="detailTable"
      size="small"
      header-align="center"
      :data="detailTableData"
      scroll-x="auto"
    >
      <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
      <vxe-column field="productCode" title="商品编码" width="120" align="center"></vxe-column>
      <vxe-column field="productName" title="商品名称" width="140" align="center"></vxe-column>
      <vxe-column field="warehouseName" title="仓库" width="120" align="center"></vxe-column>
      <vxe-column field="imageUrl" title="图片" width="80" align="center">
        <template slot-scope="{ row }">
          <img v-if="row.imageUrl" :src="row.imageUrl" alt="图片" style="width:40px;height:40px;object-fit:contain;" />
        </template>
      </vxe-column>
      <vxe-column field="specification" title="规格信息" width="120" align="center"></vxe-column>
      <vxe-column field="quantity" title="商品数量" width="100" align="center"></vxe-column>
      <vxe-column field="unitOfMeasure" title="单位" width="80" align="center"></vxe-column>
      <vxe-column field="discount" title="折扣" width="80" align="center"></vxe-column>
      <vxe-column field="stdPrice" title="标准单价" width="100" align="center"></vxe-column>
      <vxe-column field="actualPrice" title="实际单价" width="100" align="center"></vxe-column>
      <vxe-column field="stdAmount" title="标准金额" width="120" align="center"></vxe-column>
      <vxe-column field="actualAmount" title="实际金额" width="120" align="center"></vxe-column>
      <vxe-column field="onSaleAmount" title="让利后金额" width="120" align="center"></vxe-column>
      <vxe-column field="expressFee" title="物流费用" width="120" align="center"></vxe-column>
      <vxe-column field="otherFee" title="其他费用" width="120" align="center"></vxe-column>
      <vxe-column field="prepareStatus" title="预售" width="80" align="center">
        <template slot-scope="{ row }">{{ row.prepareStatus ? '是' : '否' }}</template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { listFinancialAuditItems } from '@/api/mes/sales/financialAudit';
export default {
  name: "ItemDetail",
  props: {
    deliveryOrderId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      detailTableData: [],
      
    giftDialog: {
      visible: false,
      giftList: [],
      selected: []
    },
    };
  },
  watch: {
    deliveryOrderId: {
      handler(newVal) {
        if (newVal) {
          this.getDetailList();
        } else {
          this.detailTableData = [];
        }
      },
      immediate: true
    }
  },
  methods: {
    getDetailList() {
      listFinancialAuditItems(this.deliveryOrderId).then(response => {
        if (response.code === 200 && response.data) {
          this.detailTableData = response.data.volist;
        }
      });
    },
  }
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>
